<template>
    <div class="card rdsp-card-view" data-page="electricalFire">
        <div class="card-content rank-content card-content-padding">
            <div class="rdsp-card-title">
                <div class="left-title">电气火灾监测</div>
                <div class="rdsp-card-title-right">
                    <div style="font-size: 12px;color: #999;float:left;margin-right: 16px;">监测总数<span
                            style="color: #378BF6;margin-left: 4px;" id="jianchenum"></span></div>
                    <div style="font-size: 12px;color: #999;;float:left">警情 <span style="color: red;margin-left: 4px;"
                            id="jingqingnum"></span></div>
                </div>
            </div>
            <div class="swiper-container swiper-container-horizontal" id="swiper-wrapper-infol">
                <div class="swiper-wrapper electricalFire-swiper-wrapper" id="swiper-wrapper-info">

                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination" id="electricalFire_page"></div>
            </div>
        </div>
    </div>
</template>
<style scoped>
    .detailInfo {
        color: #FFFFFF;
        width: 100%;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        box-sizing: border-box;
        padding-right: 20px;
    }

    .rdsp-icon {
        margin-left: 0 !important;
    }

    .deteInfo {
        height: 45px;
        background: rgba(0, 0, 0, .5);
    }

    .deteInfo a {
        display: flex;
        height: 45px;
        line-height: 45px;
    }

    /*@media screen and (max-width: 330px) {
.every-type-chart-wrap .right-num{
    right: 1%;
}
#hasAnalogChart-clock-39{
    margin-left: -10px;
}
}*/
    .rdsp-icon {
        padding: 0 8px;
        line-height: 22px;
        box-sizing: border-box;
    }

    .swiper-container {
        margin-top: 10px;
    }

    .swiper-container {
        padding-bottom: 20px;
    }

    .swiper-container-horizontal>.swiper-pagination-bullets,
    .swiper-pagination-custom,
    .swiper-pagination-fraction {
        bottom: -5px;
    }

    #electricalFire_page {
        width: 158px;
        left: 50%;
        margin-left: -79px;
        overflow: hidden;
        white-space: nowrap;
    }

    .every-type-chart-wrap .right-num span {
        color: #77be07;
    }
</style>
<script>
    return {
        data: function () {
            return {
                width: window.screen.width - 175,
                pageIndex: 0,
                pageSize: 9,
            }
        },
        methods: {
            getelectricalFire: function () {
                $("#jianchenum").empty();
                $("#jingqingnum").empty();
                var self = this;
                var id_org = "";
                if (single_Orgid == "") {
                    id_org = userInfor.organizationIds;
                } else {
                    id_org = single_Orgid;
                }
                Dao.getFireResMonitorInfo({
                    userName: userInfor.accountName,
                    deviceId: appKeyObj.deviceId,
                    queryType: 0,
                    resType: 3,
                    orgIds: id_org,
                    pageIndex: self.pageIndex,
                    pageSize: self.pageSize,
                }, function (data) {
                    if (data.length > 0) {
                        if (data.length < 2) {
                            $("#electricalFire_page").hide();
                        }
                        $("#swiper-wrapper-info").empty();
                        for (var i = 0; i < data.length; i++) {
                            var color = "#77be07";
                            var showDat = "0";
                            var thresholdMin = " ";
                            var thresholdMax = " ";
                            var valuenum = 0;
                            $("#swiper-wrapper-info").append(
                                ` <div class="swiper-slide apply" style="background: rgba(244, 244, 244, 1);border-radius:4px;">
                                                                 <div class="every-type-chart-wrap" id="topChartContain` + data[i].id + `" >
                                                                    <div class="top-ban" id="electricalFire-top-ban` +
                                data[i].id +
                                `">
                                                                         <div class="decterHasAnalogChart-style" style="width:` +
                                self.width +
                                `px;height:160px;margin-right: 25px;margin-top: 20px" id="hasAnalogChart-clock-` +
                                data[i].id +
                                `">
                                                                         </div>
                                                                         <div class="right-num" style="text-align: left; margin-top: -35px;">
                                                                              <div class="right-top-num">
                                                                                 <span style="font-size:29px;padding-left:0px;" id="more-electrical` +
                                data[i].id +
                                `">0</span>
                                                                                 <span style="font-size: 15px;" id="dw` + data[i]
                                .id + `">mA</span>
                                                                              </div>
                                                                              <p style="padding: 0;color: #999999;font-size:13px;">当前剩余电流</p>
                                                                              <table class="decter-table-content" >
                                                                                <thead>
                                                                                 <tr id="electricalFire-tr` + data[i]
                                .id +
                                `">
                                                                                  <td style="font-size: 14px" id="axiangwendu` +
                                data[i].id + `">0</td>
                                                                                  <td id="bxiangwendu` + data[i].id + `">0</td>
                                                                                  <td id="cxiangwendu` + data[i].id +
                                `">0
                                                                                  </td>
                                                                                 </tr>
                                                                                 <tr style="color: #999;font-size: 10px">
                                                                                  <td >A相温度</td><td style="padding-left: 2px">B相温度</td>
                                                                                  <td style="padding-left: 2px">C相温度</td>
                                                                                 </tr>
                                                                                </thead>               
                                                                              </table>         
                                                                         </div>
                                                                    </div>
                                                                    <div class="card-noAnalog" id="card-electricalFire-noAnalog` + data[i].id + `">
                                                                       <div class="noAnalog-left">
                                                                          <img src="/ilink-app-h5-zd/static/img/rdspFile_1557407601520.png" />
                                                                       </div>
                                                                       <div class="noAnalog-right">
                                                                            <p class="noAnalog-right-text"></p>
                                                                            <span class="noAnalog-right-type">当前状态</span>
                                                                       </div>
                                                                    </div>
                                                                    <div class="deteInfo">
                                                                      <a href="/eqmentMsg/` + data[i].id + `/" class="item-link item-content" data-view=".view-main">
                                                                         <div class="detailInfo">
                                                                         <span id="electricalFire` + data[i].id +
                                `"></span>` + common.transNullundefined(data[i].name) + `剩余电流+温度传感器
                                                                        </div>
                                                                      </a>
                                                                     </div>
                                                                   </div>  
                                                                 </div>`);
                            if (data[i].analogInfo.length > 0) {
                                for (var j = 0; j < data[i].analogInfo.length; j++) {
                                    if (data[i].analogInfo[j].realTimeAnalogInfo != null) {
                                        if (data[i].analogInfo[j].dataTypeId == 39) { //剩余电流
                                            if (data[i].analogInfo[j].realTimeAnalogInfo.analogValue !=
                                                null) {
                                                $("#more-electrical" + data[i].id).empty();
                                                showDat = data[i].analogInfo[j].realTimeAnalogInfo
                                                    .analogValue;
                                                valuenum = data[i].analogInfo[j].realTimeAnalogInfo
                                                    .analogValue;
                                                thresholdMin = data[i].analogInfo[j].thresholdMin;
                                                thresholdMax = data[i].analogInfo[j].thresholdMax;
                                                if (showDat <= thresholdMin || showDat >=
                                                    thresholdMax) { //判断是否正常
                                                    color = "#fe6668"; //不正常
                                                } else {

                                                    color = "#77be07"; //正常
                                                }
                                                $("#more-electrical" + data[i].id).html(showDat).css(
                                                    "color", transFireColor(data[i].fireTType)); //剩余电流
                                                $("#dw" + data[i].id).css("color", transFireColor(data[i]
                                                    .fireTType)); //单位
                                                $("#electricalFire-tr" + data[i].id).css("color",
                                                color); //温度
                                            } //if-3
                                        }
                                        if (data[i].analogInfo[j].dataTypeId == 36) { //A相温度
                                            if (data[i].analogInfo[j].realTimeAnalogInfo.analogValue !=
                                                null) {
                                                $("#axiangwendu" + data[i].id).empty();
                                                showDat = data[i].analogInfo[j].realTimeAnalogInfo
                                                    .analogValue;
                                                $("#axiangwendu" + data[i].id).html(showDat);
                                                $("#axiangwendu" + data[i].id).append(data[i].analogInfo[j]
                                                    .realTimeAnalogInfo.analogUnits);
                                                thresholdMin = data[i].analogInfo[j].thresholdMin;
                                                thresholdMax = data[i].analogInfo[j].thresholdMax;
                                                if (showDat >= thresholdMax) { //判断是否正常
                                                    color = "#fe6668"; //不正常
                                                } else {
                                                    color = "#77be07"; //正常
                                                }
                                                $("#axiangwendu" + data[i].id).css("color", color);

                                            }
                                        }
                                        if (data[i].analogInfo[j].dataTypeId == 37) { //B相温度
                                            if (data[i].analogInfo[j].realTimeAnalogInfo.analogValue !=
                                                null) {
                                                $("#bxiangwendu" + data[i].id).empty();
                                                showDat = data[i].analogInfo[j].realTimeAnalogInfo
                                                    .analogValue;
                                                $("#bxiangwendu" + data[i].id).html(showDat);
                                                $("#bxiangwendu" + data[i].id).append(data[i].analogInfo[j]
                                                    .realTimeAnalogInfo.analogUnits);
                                                thresholdMin = data[i].analogInfo[j].thresholdMin;
                                                thresholdMax = data[i].analogInfo[j].thresholdMax;
                                                if (showDat >= thresholdMax) { //判断是否正常
                                                    color = "#fe6668"; //不正常
                                                } else {
                                                    color = "#77be07"; //正常
                                                }
                                                $("#bxiangwendu" + data[i].id).css("color", color);
                                            }
                                        }
                                        if (data[i].analogInfo[j].dataTypeId == 38) { //C相温度
                                            if (data[i].analogInfo[j].realTimeAnalogInfo.analogValue !=
                                                null) {
                                                $("#cxiangwendu" + data[i].id).empty();
                                                showDat = data[i].analogInfo[j].realTimeAnalogInfo
                                                    .analogValue;
                                                $("#cxiangwendu" + data[i].id).html(showDat);
                                                $("#cxiangwendu" + data[i].id).append(data[i].analogInfo[j]
                                                    .realTimeAnalogInfo.analogUnits);
                                                thresholdMin = data[i].analogInfo[j].thresholdMin;
                                                thresholdMax = data[i].analogInfo[j].thresholdMax;
                                                if (showDat >= thresholdMax) { //判断是否正常
                                                    color = "#fe6668"; //不正常
                                                } else {
                                                    color = "#77be07"; //正常
                                                }
                                                $("#cxiangwendu" + data[i].id).css("color", color);
                                            }
                                        }
                                    }
                                }
                            }
                            $("#electricalFire" + data[i].id).empty().append(transFireIcon(data[i]
                                .fireTType)); //报警状态
                            $("#more-electrical" + data[i].id).html(showDat).css("color", transFireColor(
                                data[i].fireTType)); //剩余电流
                            $("#dw" + data[i].id).css("color", transFireColor(data[i].fireTType)); //单位
                            if (data[i].fireTType == 20) { //
                                $("#card-electricalFire-noAnalog" + data[i].id).show();
                                $("#card-electricalFire-top-ban" + data[i].id).hide();
                                $("#card-electricalFire-noAnalog" + data[i].id).find(".noAnalog-right-text")
                                    .empty().html(transFireToText(data[i].fireTType)).css("color",
                                        transFireColor(data[i].fireTType));

                            } else {
                                $("#card-electricalFire-noAnalog" + data[i].id).hide();
                                $("#card-electricalFire-top-ban" + data[i].id).show();

                            }
                            self.drawHalfClockChart(valuenum, data[i].id);
                        }
                        var mySwiper = new Swiper('#swiper-wrapper-infol', {
                            /*  autoplay: false,//可选选项，自动滑动 */
                            pagination: {
                                el: '#electricalFire_page',
                            },
                            loop: true,
                        });


                    }
                    if (data == null) {
                        $("#swiper-wrapper-info").append(
                            `<div><img  style="width: 283px;display:block" src="` + listNoDataPic() +
                            `"></div>`);
                    }
                });
                Dao.getFcfRealTimeStatusMultiCount({
                    userName: userInfor.accountName,
                    deviceId: appKeyObj.deviceId,
                    fcfsType: 3,
                    orgIds: id_org
                }, function (data) {
                    $("#jianchenum").html(data.count);
                    $("#jingqingnum").html(data.fireAlarmCount);
                });
            },
            //*****************echart
            drawHalfClockChart: function (valuenum, id) {
                var self = this;
                var myChart_safetyIndex = echarts.init(document.getElementById("hasAnalogChart-clock-" + id));
                var _num = valuenum;
                var option_safetyIndex = {
                    series: [{
                        type: 'gauge',
                        min: 0,
                        max: 1000,
                        radius: "100%",
                        center: ["55%", "65%"],
                        startAngle: 180,
                        endAngle: 90,
                        splitNumber: 5, //5等分
                        //仪表盘标题。
                        title: {
                            show: true,
                            textStyle: {
                                fontSize: 15
                            }
                        },
                        axisLabel: { //文字样式（及“10”、“20”等文字样式）
                            distance: 5, //文字离表盘的距离
                            fontSize: 10,
                        },
                        axisLine: { // 坐标轴线
                            lineStyle: { // 属性lineStyle控制线条样式
                                color: [
                                    [1, '#000']
                                ],
                                shadowBlur: 2,
                                width: 8,
                                shadowColor: '#000', //默认透明
                            }
                        },
                        axisTick: { // 坐标轴小标记
                            splitNumber: 5,
                            length: 14, // 属性length控制线长
                            lineStyle: { // 属性lineStyle控制线条样式
                                color: '#000'
                            }
                        },
                        splitLine: { //分割线样式（及10、20等长线样式）
                            length: 18,
                            lineStyle: { // 属性lineStyle控制线条样式
                                color: '#000'
                            }
                        },
                        pointer: {
                            length: '60%',
                            width: '3',
                        },
                        detail: null,
                        data: [{
                            value: _num,
                            name: '',
                        }]
                    }]
                };
                if (option_safetyIndex && typeof option_safetyIndex === "object") {
                    myChart_safetyIndex.setOption(option_safetyIndex, true);
                    //myChart_safetyIndex1.setOption(option_safetyIndex, true);
                }
            },
        },
        on: {
            pageInit: function (e, page) {
                var self = this;
                self.getelectricalFire();
            }
        }
    }
</script>